<!DOCTYPE html>
<html>
	<script language="javascript" type="text/javascript">	
		setInterval(function(){MoveImage()},5);
		var direction = "right";
		
		function UpdateEcho() {
			// updates check box status echo
			var status = document.getElementById("chkMoveImg").checked;
			document.getElementById("lblCheckEcho").innerHTML = status;
			// updates current image echo
			var selectBox = document.getElementById("slctImage");
			var selectOption = selectBox.options[selectBox.selectedIndex].value;
			document.getElementById("lblImageEcho").innerHTML = selectOption;	
			// updates image to what is selected
			document.getElementById("imgTest").src = selectOption;
        }
		
		function UpdateTheme() {
			var selectBox = document.getElementById("slctTheme");		
		    var selectOption = selectBox.options[selectBox.selectedIndex].value;
			document.getElementById("lnkTheme").href = selectOption;
		}
		
		function MoveImage() {
			// updates image coordinates echo
			var image = document.getElementById("imgTest");				
			document.getElementById("lblImageCoords").innerHTML = image.hspace + "," + image.vspace;
			// update image direction echo
			document.getElementById("lblImageDir").innerHTML = direction;	
			// move image
			if(document.getElementById("chkMoveImg").checked == true)
			{
				if(direction == "left")
				{
					if(image.hspace == 0)
						direction = "right";
					image.hspace -= 1;
				}
				else if(direction == "right")
				{
					if(image.hspace == 300)
						direction = "left";
					image.hspace += 1;
				}
			}
		}
		onload=UpdateEcho;
    </script>
	
	<head>
		<link id="lnkTheme" rel="stylesheet" type="text/css" href="WinterTheme.css">
	</head>
		
	<title>Test Page</title>
	<h2>Log in</h2>
	<form name="frmLogIn" method="post">
		Username: <input type="text" name="name">
		<br>
		Password: <input type="password" name="pass">
		<br>
		<input type="submit" value="Submit">
	</form>
	<br>	
	<fieldset>
		<legend>Echoes</legend>
		<font color="red">
			<label>Move Status = </label>
		</font>
		<font color="blue">
			<label id="lblCheckEcho">none</label>
		</font>
		<br>
		<font color="red">
			<label>Current Image = </label>
		</font>
		<font color="blue">
			<label id="lblImageEcho">none</label>
		</font>
		<br>
		<font color="red">
			<label>Image Coordinates = </label>
		</font>
		<font color="blue">
			<label id="lblImageCoords">none</label>
		</font>
		<br>
		<font color="red">
			<label>Image Direction = </label>
		</font>
		<font color="blue">
			<label id="lblImageDir">none</label>
		</font>
	</fieldset>
	<fieldset>	
		<legend>Controls</legend>	
		<label for="chkMoveImg">Move Image</label>
		<input type="checkbox"
			   id="chkMoveImg"
			   value="greenEggs"
			   onclick="UpdateEcho()"/>        
		<br>
		<label for="slctImage">Image</label>
		<select style="margin-left:6px;" id="slctImage" name="slctImage" onclick="UpdateEcho()" title="select the image to appear on screen">
			<option value="MyPhoto1.jpg">MyPhoto1.jpg</option>
			<option value="MyPhoto2.jpg">MyPhoto2.jpg</option>
			<option value="MyPhoto3.jpg">MyPhoto3.jpg</option>
		</select>  
		<br>
		<label for="slctTheme">Theme</label>
		<select id="slctTheme" name="slctTheme" onclick="UpdateTheme()" title="select the page theme">
			<option value="WinterTheme.css">Winter</option>
			<option value="SummerTheme.css">Summer</option>
		</select>  
	</fieldset>	
	<img alt="Sad Image" width=200 height=200 id="imgTest" usemap="testmap"/> 
	<map name="testmap">
		<area shape="circle" coords="60,40,15" title="left eye">
		<area shape="circle" coords="124,58,8" title="right eye">
	</map>
</html>